<template>
  <uni-popup ref="popup" type="bottom" mask-background-color="rgba(0,0,0,.5)" @change='change' :safe-area="false">
    <view class="info-wrapper">
      <view class="info-title">
        <text>支付方式统计明细</text>
        <view class="icon-close" @tap="popup.close()"><image src="/static/iconImg/icon-x.svg" mode="scaleToFill" /></view>
      </view>
      <StatInfoCard @sortClick="switchField" :fixed="true">
        <JTableList ref="refTable" :reqTableDataFunc="reqTableDataFunc" :initData="false" height='220rpx' :searchData="vdata.params">
          <template #tableBody="{ record }">
            <statCell
              :imgNone="false"
              :title="record.wayName"
              :money="calcData(record[vdata.cardSelected])"
              :reality="calcReality(record[vdata.cardSelected])"
              :round="vdata.cardSelected == 'round'"
              :iconPre="vdata.cardSelected == 'payAmount' || vdata.cardSelected == 'refundAmount'"
              :iconNext="vdata.cardSelected == 'round'"
            />
          </template>
        </JTableList>
      </StatInfoCard>
    </view>
  </uni-popup>
</template>

<script setup>
import { nextTick, onMounted, reactive, ref,inject } from 'vue'
import { onReachBottom } from '@dcloudio/uni-app'
import { $getStatistic } from '@/http/apiManager.js'
import StatInfoCard from './StatInfoCard.vue'
import statCell from './statCell.vue'
import cal from '@/commons/utils/cal.js'
// 获取弹窗实例
const popup = ref(null)
const refTable = ref(null)
const vdata = reactive({
  cardSelected: 'payAmount',
  record: {},
  params: {},
})
const open = (params, record) => {
  const obj = JSON.parse(JSON.stringify(params))
  vdata.record = record
  obj.wayCodeType = record.wayType
  obj.method = 'wayCode'
  vdata.params = obj
  popup.value.open()
  nextTick(() => {
    refTable.value.refTable(true)
  })
}
const reqTableDataFunc = (params) => {
  return $getStatistic(params)
}
//切换字段 切换排序
const switchField = (val) => {
  vdata.cardSelected = val.value
  vdata.params.sortOrder = val.sort
  vdata.params.sortField = val.value
  refTable.value.refTable(true)
}
// 计算数据需不需要除以 100
const calcData = (val) => {
  if (vdata.cardSelected == 'payAmount' || vdata.cardSelected == 'refundAmount') return cal.cert2Dollar(val)
  return val
}
// 计算进度条
const calcReality = (val) => {
  return (val / vdata.record[vdata.cardSelected]) * 100
}
let changePageMetaOverflowFunc = inject('changePageMetaOverflowFunc')
const change = (e)=>{
  if(changePageMetaOverflowFunc){
    changePageMetaOverflowFunc(!e.show)
  }
}
onReachBottom(() => {})
defineExpose({ open })
</script>

<style lang="scss" scoped>
.info-wrapper {
  height: 70vh;
  overflow-y: scroll;
  border-radius: 32rpx 32rpx 0 0;
  background-color: #fff;
}
.info-title {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40rpx;
  height: 110rpx;
  font-size: 30rpx;
  font-weight: 500;
  border-bottom: 1rpx solid #ededed;
  .icon-close {
    width: 50rpx;
    height: 50rpx;
    border-radius: 10rpx;
    background-color: #f2f2f2;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
